﻿<!-- #layout name=empty -->
<div class="page-loading" style="display: none;">
  <div class="content">
    <p><i class="fa fa-spinner fa-spin"></i> <span>Logging in...</span></p>
  </div>
</div>
<div class="container" id="app">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
      <div class="block-small-form">
        <div class="logo">
          <img src="/_admin/Images/logo-blue.png" alt="Logo" />
        </div>
        <div class="tab-content">
          <div id="tab_account_login" class="tab-pane fade active in">
            <kb-form :model="model" :rules="rules" ref="form">
              <kb-form-item prop="username">
                <label class="sr-only">Username</label>
                <input
                  class="form-control"
                  type="text"
                  placeholder="Username"
                  v-model="model.username"
                />
              </kb-form-item>
              <kb-form-item prop="password">
                <label class="sr-only">Password</label>
                <input
                  class="form-control"
                  type="password"
                  placeholder="Password"
                  v-model="model.password"
                  @keypress.enter="onLogin"
                />
              </kb-form-item>
              <kb-form-item>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" v-model="model.remember" />
                    <span>Keep me signed in</span>
                  </label>
                </div>
              </kb-form-item>
              <kb-form-item>
                <button class="btn blue" @click="onLogin">Sign in</button>
                <p>
                  <a :href="Kooboo.Route.User.ForgotPassword"
                    >Forgot password?</a
                  >
                </p>
                <p>
                  <span>Do not have an account?</span>
                  <a :href="Kooboo.Route.User.RegisterPage"
                    >Create an account</a
                  >
                </p>
              </kb-form-item>
            </kb-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="/_Admin/Scripts/components/kbForm.js"></script>

<script>

  
  new Vue({
    el: "#app",
    data: function() {
      return {
        model: {
          username: "",
          password: "",
          remember: false,
          returnUrl: Kooboo.getQueryString("returnurl"),
          type: Kooboo.getQueryString("type")
        },
        rules: {
          username: [
            {
              required: Kooboo.text.validation.required
            }
          ],
          password: [
            {
              required: Kooboo.text.validation.required
            }
          ]
        }
      };
    },
    methods: {
      onLogin: function() {
        if (this.$refs.form.validate()) {
          Kooboo.User.login(this.model).then(function(res) {
            if (res.success) {
              location.href = res.model;
            }
          });
        }
      }
    }
  });
</script>
